import React from 'react';
import { useDrag } from 'react-dnd';
import './index.less';

interface Command {
    id: string;
    name: string;
    description: string;
    type: string;
}

interface CommandItemProps {
    command: Command;
}

const CommandItem: React.FC<CommandItemProps> = ({ command }) => {
    const [{ isDragging }, drag] = useDrag(() => ({
        type: 'COMMAND',
        item: { type: 'COMMAND', command },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

    return (
        <div
            ref={(node) => { drag(node) }}
            className={`command-item ${isDragging ? 'dragging' : ''}`}
            style={{
                cursor: 'grab',
                opacity: isDragging ? 0.5 : 1,
                transform: isDragging ? 'scale(1.05)' : 'none',
                transition: 'all 0.2s ease',
            }}
        >
            <div className="command-name">{command.name}</div>
            <div className="command-description">{command.description}</div>
        </div>
    );
};

const CommandSidebar: React.FC = () => {
    const commands: Command[] = [
        {
            id: 'click',
            name: '点击',
            description: '点击指定元素',
            type: 'action'
        },
        {
            id: 'input',
            name: '输入',
            description: '向指定元素输入文本',
            type: 'action'
        },
        {
            id: 'wait',
            name: '等待',
            description: '等待指定时间或条件',
            type: 'action'
        },
        {
            id: 'if',
            name: '条件判断',
            description: '根据条件执行不同的操作',
            type: 'control'
        },
        {
            id: 'loop',
            name: '循环',
            description: '重复执行指定操作',
            type: 'control'
        }
    ];

    return (
        <div className="command-list">
            {commands.map((command) => (
                <CommandItem key={command.id} command={command} />
            ))}
        </div>
    );
};

export default CommandSidebar; 